<template>
  <div class="home">
   <my-header></my-header>
    <ul class="mycount">
      <li v-for="(item,index) in arr" :key="index" :class="cur == index ? 'active' :''" @click="tab(item.tab,index)">{{item.name}}</li>
    </ul>
    <ul class="countent">
      <li v-for="(item,i) in list" :key="i">
      <span>{{item.title}}</span>&emsp;
      <span>{{item.create_at | time}}</span>
      </li>
    </ul>
      <el-backtop></el-backtop>
  </div>
  
</template>

<script>
import myHeader from '@/components/myHeader.vue';
import axios from 'axios';
export default {
  data() {
    return {
      arr:[
        {
          name:"全部",
          tab:"all"
        },{
          name:"精华",
          tab:"ask"
        },{
          name:"分享",
          tab:"share"
        },{
          name:"问答",
          tab:"job"
        },{
          name:"招聘",
          tab:"good"
        },{
          name:"客户端测试",
          tab:""
        }
      ],
      cur:0,
      list:[]
    }
  },
  name: 'Home',
  components: {
    myHeader
  },
  created() {
    axios.get('https://cnodejs.org/api/v1/topics/?tab=all').then(res=>{
     console.log(res);
    })
  },
  methods:{
    tab(val,i){
     this.cur = i
     axios.get('https://cnodejs.org/api/v1/topics/?tab='+val).then(res=>{
      this.list = res.data.data
    })
    }
  },
 filters:{
    time(val){
      let old = new Date(val).getTime()
      let n = new Date().getTime()
      let subTime = (n - old)/1000
      let m = 60
      let h = m*60
      let d = h*24
      let result = ""
      if(parseInt(subTime / d) >=1){
        result = `${parseInt(subTime / d)}天前`  
      }else if(parseInt(subTime / h) >= 1){
        result = `${parseInt(subTime / h)}小时前`
      }else if(parseInt(subTime / m) >= 1){
        result = `${parseInt(subTime / m)}分钟前` 
      }else{
        result = `${parseInt(subTime)}秒前` 
      }
      return result
    }
  }
}
</script>
<style lang="scss" scoped>
.mycount{
  display: flex;
  justify-content: space-around;
  color: #8EBA39;
  margin-top: 10px;
}
 .active {
    color: #fff;
    height: 23px;
    border-radius: 5px;
    background: #a0c05e;
  }
</style>

